<template>
  <el-card>
    <div id="single">
      <slot name="single"></slot>
    </div>
    <div id="left">
      <slot name="btn"></slot>
    </div>
    <div id="right">
      <slot name="input"></slot>
    </div>
  </el-card>
</template>

<script>
export default {};
</script>

<style scoped>
.el-card {
  padding: 30px 26px;
  margin-bottom: 26px;
  border-radius: 10px;
  overflow-x: scroll;
}

.el-card >>> .el-card__body {
  display: flex;
  justify-content: space-between;
  padding: 0;
}

#left {
  width: 250px;
  display: flex;
}

/* 如果使用了single插槽，left盒子没有元素 */
#left:empty {
  display: none;
}

#right {
  display: flex;
  /* width: 100%; */
}

#single {
  display: flex;
  margin-left: 44px;
}

#single:empty {
  display: none;
}
</style>
